<template>
	<div style="width: 100%;height: 100%;background: #F5F5F5;">
	<van-sticky>
	  <van-nav-bar :title="this.checktype==1?'修改地址':'新增地址'" left-arrow @click-left="onClickLeft"   >
	 </van-nav-bar >
	</van-sticky>
	  <van-field v-model="form.name" label="收货人" placeholder="请填写收货人名字" />
	    <van-field v-model="form.phone" label="联系电话" placeholder="请填写联系电话" />
	    <van-field v-model="form.address" is-link @click='show=true' label="所在地区" placeholder="省市区乡镇等" readonly  />
		<van-field v-model="form.detail" label="详细地址" placeholder="街道,楼牌等详细地址"   />
		 <van-cell title="设置默认地址">
		   <template #default 	>
			   <van-checkbox v-model="form.is_check" checked-color="#fe6142"></van-checkbox>
		   </template>
		 </van-cell>
		<!-- 商品主图 -->
		<div v-show="show" style="background: rgb(0,0,0,0.3);position: fixed;top: 0;right: 0;width: 100%;height: 100%;z-index: 9999;"></div>
		<van-area title="所在地" @confirm='getaddress' @cancel='show=false' v-show="show" :area-list="areaList" value="110101" />
		<van-button v-if="this.checktype==0" @click='submit' type="danger">保存</van-button>
		<van-button v-if="this.checktype==1" @click='submiter' type="danger">保存</van-button>
	</div>
</template>
<script>
	import area from '@/utils/area.js'
	import { addAddress,editAddress } from "../../api/home";
	export default {
		data() {
			return {
				areaList:area,
				value:"",
				star:true,
				type:"1",
				carshow: false,
				headtype: true,
				activeIndex: 0, //规格默认
				slides: [],
				show: false,
				goodsValue: 1,
				goodsId: "",
				goodsInfo: {},
				 checked: true,
				freight: "",
				goodsSize: [],
				chooseSize: {},
				colorType:"选择颜色",
				shop:{
					goods_attribute:'',
					number:'',
				},
				sku: {
					tree: [{
						k: '颜色',
						v: [],
						k_s: 's1',
					}],
					list: [

					],
					price: '', //？？
					stock_num: '', // 商品总库存？？
					none_sku: false, // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
					hide_stock: false, // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
				},
				showBase: true, //sku的框的显示
				showCustom: false,
				showStepper: false,
				showSoldout: false,
				checktype:0,
				closeOnClickOverlay: true, //点击空白处关闭购物框
addressDetail:"",
				goods: {},
				starform: {},
				iamgeslide:[],
				messageConfig: {},
				goodstype:[],
				userphone:{},
				customStepperConfig: {

				},
				form:{
				},
			};
		},
		created() {
			if(this.$route.query){
				let arr=JSON.parse(this.$route.query.item)
				console.log(arr)
				this.form=arr
				this.form.addressall=arr.addressCity+arr.addressProvince+arr.addressArea				// this.form.addressName=arr.name
				// this.form.addressPhone=arr.tel
				// this.form.addressall=arr.address
				// this.checked=arr.isDefault
				// this.form.addressProvince=arr.sheng
				// this.form.addressCity=arr.shi
				// this.form.addressArea=arr.qu
				// this.addressDetail=arr.deatil
				this.checktype=1
			}
		 // this.getlist()
		 // globals().then(res=>{
			//  this.userphone=res.data
		 // })
		},
		methods: {
			update(){
				if(this.form.is_check){
					this.form.addressDefault=1
				}else{
					this.form.addressDefault=0
				}
				// addressDetail
				addressupdate(this.form).then(res=>{
					if(res.data.code==0){
						this.$toast('更改地址成功')
						this.$router.go(-1)
					}else{
						this.$toast('更改地址失败')
					}
				})
			},
			getaddress(e){
				this.form.addressProvince=e[0].name
				this.form.addressCity=e[1].name
				this.form.addressArea=e[2].name
				this.form.address=e[0].name+e[1].name+e[2].name
				this.show=false
			},
			
			submiter(){
				if(this.form.is_check){
				
								this.form.is_check=1
				
							}else{
				
								this.form.is_check=0
				
							}
				editAddress(this.form).then(res=>{
					
				})
			},
			submit(){
					if(this.form.is_check){
									this.form.is_check=1
								}else{
									this.form.is_check=0
								}
				addAddress(this.form).then(res=>{
					
				})
			},
			check(e){
				this.type=e
			},
			telphone(){
				 window.location.href = `tel:${this.userphone.customer_service_phone}`;
			},
			checkgoods(value){
				this.shop.goods_attribute=value
				this.checked=value
			},
			getlist(){
				
				goodsInfo({
					id: this.$route.query.id
				}).then(res => {
					let arr=[]
					let image=[]
					this.goodsInfo = res.data[0]
					this.goodsInfo.images.split(',').map((i,x)=>{
						image.push({
							value:i
						})
					})
					this.iamgeslide=image
					this.starform.goods_id=res.id
				})
			},
			Clickstar(value){
				if(value==0){
					this.starform.type=1
				}else{
					this.starform.type=0
				}
				collectionStatus(this.starform).then(res=>{
					this.getlist()
				})
			},
			changesku(value) {
				
			},
			addCar() {
				this.carshow=true
			
			},
			onClickLeft() {
				this.$router.go(-1);
			},

			onBuyClicked() {
				if(this.shop.goods_attribute==''){
					this.$toast('请选择商品规格')
					return false;
				}
				let data = {
					goods_id: this.starform.goods_id,
					goods_attribute: this.shop.goods_attribute,
					number: this.shop.number
				};
		this.$router.push({
			path: `payOrder`,
		});
		
		localStorage.setItem('goods',  JSON.stringify(data) )
			},
			onAddCartClicked() {
				let data = {
					goods_id: this.starform.goods_id,
					goods_attribute: this.shop.goods_attribute,
					number: this.shop.number
				};
				addShopping(data).then(res => {
					this.$toast("成功加入购物车!");
					this.carshow=false
				});
			},
			toShowShopCar() {
				this.show = true;
			},
			goShowPay() {
				this.show = true;
			},
			// 选择规格
			getSize(item, index) {
				this.activeIndex = index;
				this.chooseSize = item;
			},

			chooseShow() {
				this.show = true;
			}
		}
	};
</script>
<style lang="less" scoped>
	.van-tag--danger{
		background: #326964;
	}
	.van-address-list__bottom{
		padding: 0;
	}
	.van-button--danger{
		position: fixed;
		bottom: 0;
		width: 100%;
		margin: 0;
		    color: white;
		border-radius: 0;
		border: none;
	background: #326964;
	}
	/deep/.van-checkbox{
		text-align: right;
	flex-direction: row-reverse;
	}
	/deep/.van-field__label{
		width: auto;
		font-weight: 500;
	}
	.van-picker{
		width: 100%;
		z-index: 100000;
		position: fixed;
        bottom: 0;		
	}
	.butdeatil{
		margin: 90px auto;
		width: 90%;
		border-radius: 25px;
		font-size: 18px;
		padding: 8px 10px;
		text-align: center;
		color: #78482f;
		background: linear-gradient(to right, #ecd6ad , #fbedd0,#ecd6ad );
	}
	.van-nav-bar {
		background: #326964;
	
		/deep/.van-nav-bar__title {
			color: #ffffff;
		}
	
		/deep/ .van-icon {
			color: #ffffff;
		}
		
	}
	/deep/.htmlcls{
		padding-bottom: 60px;
		font-size: 14px;
		div,p,ul,li,ol{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		img{
			width: 100%;
		}
	}
	.back-but{
		width: 30px;
		height: 30px;
		position: absolute;
		z-index: 9;
		top: 15px;
		left: 15px;
	}
	.van-button--default{
		width: 50%;
		border-radius: 25px 0 0 25px;
		color: white;
		background: -webkit-linear-gradient(left,#ffd01e,#ff8917);
		width: 50%;
		border: none;
	}
	.van-button--primary{
		width: 100%;
		border-radius:25px;
		background: #FE881E;
		background: -webkit-linear-gradient(left,#ff6034,#ee0a24);
		border: none;
	}
	.car-nav{
		padding: 15px;
		.car-nav-bot{
			padding: 10px 0 15px 0;
			display: flex;
			justify-content: start;
			flex-wrap: wrap;
			.nav-bot-check{
				margin-top: 5px;
				padding:  0 6px;
				background: #EEEEEE;
				margin-left: 5px;
				height: 30px;
				line-height: 30px;
				border-radius: 5px;
				text-align: center;
			}
			.nav-bot-checked{
				padding:  0 6px;
				margin-top: 5px;
				background:rgba(165,217,181,1);
				color: #02AB36;
				border: 1px solid #02AB36;
				margin-left: 5px;
				height: 30px;
				line-height: 30px;
				border-radius: 5px;
				text-align: center;
				
			}
		}
		.car-nav-top{
			display: flex;
			justify-content: start;
			align-items: center;
			.nav-top-right{
				margin-left: 10px;
				color: #FF6A19;
			}
		}
	
	}
	.check {
		color: #FF6B1A;
		border-bottom: 1px solid #FF6B1A;
	}

	.checkfalse {}

	.head-cls {
		display: flex;
		width: 90px;
		justify-content: space-between;
	}

	.van-img {
		width: 100%;
		height: 270px;
	}

	.detailsMid {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 20px;
		color: #333;
		font-size: 13px;
        .goodsName{
			display: flex;justify-content: space-between;color: #666666;font-size: 12px;
		}
		.price1 {
			margin-bottom: 8px;
			color: #ff3333;
			font-size: 18px;

			span {
				&:last-child {
					display: inline-block;
					margin-left: 14px;
					color: #ff3333;
					font-size: 11px;
					padding: 1.5px 6.5px;
					border-radius: 4px;
					border: 1px solid #ff0000;
				}
			}
		}

		.price2 {
			margin-bottom: 5px;
			font-size: 15px;
		}

		.goodsSize {
			margin-top: 11px;

			span {
				color: #999;

				&:last-child {
					margin-left: 33px;
				}
			}
		}
	}

	.gap {
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: darkgray;
	}

	.descTitle {
		color: #333;
		font-size: 17px;
		text-align: center;
		margin: 15px auto;
	}

	.freight {
		margin-top: 7px;
		font-size: 15px;

		span {
			color: #de4f53;
		}
	}

	.van-popup {
		font-size: 13px;
		color: #999;
	}

	.popWrap {
		padding: 14.5px 13.5px 5px 16px;
		width: 100%;
		box-sizing: border-box;
	}

	.popTop {
		padding-bottom: 14.5px;
		overflow: hidden;
		border-bottom: 1px solid #d2d2d2;
	}

	.popImg {
		width: 70.5px;
		height: 70.5px;
		margin-right: 13px;
		border-radius: 6px;
	}

	.popNow {
		color: #de4f53;
		font-size: 15px;
	}

	.popOld {
		margin: 13.5px 0 12px;
		text-decoration: line-through;
	}

	.popMid {
		padding: 5px 0 12.5px;
		border-bottom: 1px solid #d2d2d2;
	}

	.midTitle {
		color: #333;
	}

	.chooseWrap {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.chooseItem {
		border: 1px solid #999;
		padding: 3.5px;
		width: 25%;
		text-align: center;
		border-radius: 2px;
		margin-bottom: 10px;
		margin-right: 20px;
	}

	.chooseItem:nth-of-type(3n) {
		margin-right: 0;
	}

	.blankItem {
		border: 0 none;
	}

	.choosedSize {
		background: #ffbbbb;
		border: 0 none;
		color: #ff0101;
	}

	.popNum {
		padding-top: 16.5px;
		color: #333;
		margin-bottom: 18px;
	}

	.popBtn {
		padding: 0 3%;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
		height: 52.5px;
		z-index: 1000;
		// padding-top: 14px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;

		.van-button {
			height: 27px;
			border: 0 none;
			font-size: 14px;
			// width: 92%;
			color: #fff;
			line-height: 27px;
			padding: 0;
			border-radius: 13.5px;
		}

		.carBtn {
			background: #1e854c;
			margin-right: 2.5px;
		}

		.buyBtn {
			width: 94%;
			margin-left:3%;
			background:#FE881E;
			border-radius: 25px;
			height: 40px;
		}
	}

	.detailsDesc {
		font-size: 15px;
		margin-bottom: 70px;

		.detailsDesc-title {
			padding: 10px 0;
			text-align: center;
			color: #666666;
		}

		/deep/ img {
			width: 100%;
			height: auto;
			display: block;
		}
	}

	.showBtn {
		position: relative;
	}
	/deep/.van-field__label{
		color: black;
	}
</style>
